@charset "utf-8";

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

.web{
	.drawBox{
		position: absolute;
		width: 636px;
		height: 636px;
		top: 50%;
		left: 50%;
		border: 2px solid red;
		transform: translate(-50%,-50%);
		div{
			width: 200px;
			height: 200px;
			font-size: 28px;
			text-align: center;
			background-color: #ff0;
			color: #f00;
			line-height: 200px;
			border: 2px solid #87ceeb;
			position: absolute;
            user-select: none;
			&:nth-child(1){
				top: 6px;
				left: 6px;
			}
			&:nth-child(2){
				top: 6px;
				left: 216px;
			}
			&:nth-child(3){
				top: 6px;
				left: 426px;
			}
			&:nth-child(8){
				top: 216px;
				left: 6px;
			}
			&:nth-child(9){
				top: 216px;
				left: 216px;
			}
			&:nth-child(4){
				top: 216px;
				left: 426px;
			}
			&:nth-child(7){
				top: 426px;
				left: 6px;
			}
			&:nth-child(6){
				top: 426px;
				left: 216px;
			}
			&:nth-child(5){
				top: 426px;
				left: 426px;
			}
            &.active{
                color: #ff0;
                background-color:red;
                transform: scale(.95);
                border-radius: 25%;
            }
            &.starBtn{
                background-color: #c1c1c1;
                color: #fff;
                border-radius: 50%;
                cursor: pointer;
            }
		}
	}
}